<template>
  <!-- @touchend="touchEnd"
    @touchmove="touchMove"
    @touchstart="touchStart" 
  :scroll-into-view="categoryId2"-->
  <view class="max_box">
    <scroll-view scroll-y="true" :class="{ 'fixed-touch': popupShow }" @scroll="scrollFun" :scroll-top="scrollTop_"
      :style="{ height: `calc(100vh)` }">
      <!-- 自定义导航栏 -->
      <u-navbar placeholder title="锦龙ZEEKR商城" @leftClick="leftClick" :class="{ isMove_: 'title__' }"></u-navbar>
      <view class="swiper_box">
        <!-- 轮播图 -->
        <u-swiper radius="0" :list="dataList" keyName="picture" height="192px" autoplay interval="5000"
          @change="e => (currentNum = e.current)" indicatorStyle="right: 20px">
          <view slot="indicator" class="indicator-num">
            <text class="indicator-num__text">{{ currentNum + 1 }}/{{ dataList.length }}</text>
          </view>
        </u-swiper>
      </view>
      <view class="main_box">
        <!-- 左侧类型，导航栏 -->
        <view class="scroll_box">
          <!-- 公司 -->
          <view class="company_box" id="companBox" :style="{ top: (navBarHeight + statusHeight - 11) * 2 + 'rpx' }">
            <view class="company_box_top">
              <view class="company_box_text">
                <view class="company_box_text_left">
                  <view class="iconfont red" style="font-size: 40rpx">&#xe622;</view>
                  <text>{{ currComInfo.company_name }}</text>
                </view>
              </view>
              <view class="company_box_text">
                <view class="company_box_text_left">
                  <view class="iconfont red" style="font-size: 40rpx">&#xe602;</view>
                  <text class="text">{{ currComInfo.address }}</text>
                </view>
              </view>
            </view>
            <view class="company_box_ringht">
              <view class="icon_box" @click="switchCompoay">
                <uni-icons size="56rpx" color="#de4141" custom-prefix="iconfont2"
                  type="icon-jiantou_zuoyouqiehuan"></uni-icons>
                <view class="text">切换</view>
              </view>
              <view class="company_box_bottom" @click="myUser">
                <view class="iconfont red" style="font-size: 52rpx">&#xe61f;</view>
                <text class="text">我的</text>
              </view>
            </view>
          </view>
          <!-- 标签栏 -->
          <view class="tab_box fixed_tab_box" :style="{ top: (navBarHeight + statusHeight - 12 + 72) * 2 + 'rpx' }">
            <TabBar :type="type" shape="circle" @onClickItem="onClickItem" :tabsList="shopTypeCateList"></TabBar>
          </view>
          <view class="scroll_left">
            <view class="scroll_view_left"
              :style="{ top: (navBarHeight + statusHeight - 12 + 72 + 53 - 12) * 2 + 'rpx' }">
              <view v-show="mackShow" @click="mackExit" class="scroll_view_left_item">
                <text class="scroll_view_left_item-text" :class="{ top_radius: leftType == 0 }">返 回
                </text>
              </view>
              <!-- {{ leftType }} -->
              <!-- :key="`${item.type_name}-${index}`" -->
              <view :key="index" class="scroll_view_left_item" v-for="(item, index) in leftTypeCate"
                @click="clickType(index, item.category_id2)">
                <text class="scroll_view_left_item-text" :class="{
                  top_radius: leftType == index + 1,
                  left_active: leftType == index,
                  bottom_radius: leftType == index - 1
                }">
                  <!-- {{leftType == index}} -->
                  {{ item.type_name }}
                </text>
              </view>
              <view class="" style="background-color: #fff">
                <text style="color: #f6f6f6" :class="{
                  bottom_radius:
                    cateListLeng == 1 || leftType == cateListLeng - 1
                }" class="scroll_view_left_item-text">辅线</text>
              </view>
            </view>
          </view>
          <view class="right_box">
            <!-- 右侧车型标签 -->
            <view class="cart_scroll_box" :style="{ top: (navBarHeight + statusHeight - 12 + 72 + 53 - 12) * 2 + 'rpx' }">
              <scroll-view scroll-x="true" :scroll-left="scrollLeft" class="scroll_view" :show-scrollbar="true">
                <view class="tabs" :class="{
                  tabsCurr: !isMove_ && tabsIndex == 'all'
                }" @click="tabsClick({ ve_name: '全部', vem_vid: 'all' })">全 部
                </view>
                <view class="tabs" :key="item.vem_vid" @click="tabsClick(item)" :class="{
                  tabsCurr: tabsIndex == item.vem_vid ||
                    (!mackShow && isMove_ &&
                      leftTypeVeIds.indexOf(item.vem_vid) > -1)
                }" v-for="item in showCarSeries">
                  {{ item.vem_name }}
                  <!-- {{ item.vem_vid }} -->
                </view>
              </scroll-view>
            </view>
            <view style="height:60rpx"></view>
            <!-- 右侧产品列表 -->
            <view id="goodsId" class="scroll_goods">
              <view style="height: 10rpx"></view>
              <!-- 右侧产品列表组件 -->
              <view :key="item.myId" class="scroll_goods_box" v-for="item in showGoodsList"
                :id="'AA' + item.category_id2">
                <view class="scroll_goods_title">{{ item.type_name2 }}</view>
                <GoodsItem :key="item2.id" :goodsDatail="item2" :itemIndex="index" v-for="(item2, index) in item.List">
                </GoodsItem>
              </view>
              <view style="height: 900rpx"></view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="btm_car_box">
      <view class="btm_car" @click.stop="showCart">
        <uni-icons type="cart" size="60rpx" color="#de4141"></uni-icons>
        <view class="total">{{ goodsOrder.length }}</view>
      </view>
      <view class="sum">
        总计：
        <text class="text">￥{{ totalPrice | moneyShow }}</text>
      </view>
      <view class="pay_btn" @click="toGoodsPay">提交订单</view>
    </view>
    <!-- 购物车弹窗 -->
    <u-popup :show="popupShow" zIndex='10073' :safeAreaInsetBottom="false" @close="popupShow = false">
      <view class="popup-box" :style="{ height: popupHeight }" @touchmove.stop.prevent="touchmove">
        <scroll-view scroll-y="true" @scroll="touchmove" class="scroll-view">
          <CartGoodsDetail shop :itemIndex="itemIndex" @clickNum="i => { itemIndex = i }"></CartGoodsDetail>
        </scroll-view>
      </view>
    </u-popup>

    <van-popup z-index="10076" :show="showComList" position="bottom" custom-style="height: 30%;"
      @close="showComList = false">
      <van-picker value-key="company_name" show-toolbar title="请选择公司" @confirm="selectComList"
        @cancel="showComList = false" :columns="shopComList" :default-index="defaIndex" />
    </van-popup>

    <!-- 当前公司没有的商品组件 -->
    <LtemDeleted ref="deletedGoods" @hasNeedDelete="hasNeedDelete"></LtemDeleted>
  </view>
</template>
<script>
let setTi = null
let canScroll = true
import {
  goodsListApi,
  goodsCarListApi, //商品车型列表
  goodsBannerListApi,
  getShopTypeCateListApi
} from '@/API/Shop'
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  name: 'ShopAdmin',
  data() {
    return {
      defaIndex: 0,
      firstLoad: true,
      showComList: false,
      needDelete: true,
      showCarSeries: [],
      compuCarSeries: [],
      itemIndex: -1,
      popupShow: false,
      scrollTop: 1,
      scrollLeft: 0,
      isMove: false,
      // inTheEnd: false,
      // addfixedClass: false,
      fatheTop: 272,
      flag: true,
      statusBarHeight: 20,
      // windowHeight: 375,
      // 遮罩
      mackShow: false,
      currIndex: 0,
      tabsIndex: 'all',
      leftType: 0,
      currentNum: 0,
      baseUrl: this.$baseUrl,
      // 轮播图
      dataList: [],
      getDoodsParam: {
        v_id: '',
        state: '1',
        company_id: '',
        shop_title: '',
        price_begin: '',
        price_end: '',
        category_id1: '',
        category_id2: '',
        category_id3: '',
        page: 1,
        pageSize: 200,
        category: true
      },
      // 产品
      goodsDataList: [],
      // 分类列表
      shopTypeCateList: [],
      flag2: 0,
      lastX: 0,
      lastY: 0,
      needReget: 0,
      isMove_: false,
      scrollTop_: 0,
      scrollTop__: 0,
      statusHeight: 0,
      navBarHeight: 0,
    }
  },
  computed: {
    selectCompa() {
      let shopComList = this.shopComList
      return [shopComList]
    },
    // 左边商器类型导航长度
    cateListLeng() {
      let leng = this.leftTypeCate.length
      return leng
    },
    // 左边商器类型导航
    leftTypeCate() {
      let index = this.currIndex
      let typeCateList = this.shopTypeCateList
      let typeList = typeCateList[index]?.categoryList || []
      // 下面判断如果该类型商品为空则不显示
      let goodsData = this.goodsData
      let temp = []
      for (let j = 0; j < goodsData.length; j++) {
        for (let i = 0; i < typeList.length; i++) {
          if (goodsData[j].category_id2 == typeList[i].category_id2) {
            temp.push(typeList[i])
            break
          }
        }
      }
      return temp
    },
    // 左边商器类型导航选中含有的车系
    leftTypeVeIds() {
      let leftTypeCate = this.leftTypeCate
      let temp = leftTypeCate[this.leftType]?.ve_ids || []
      // return temp.map(Number)
      return temp
    },
    // 为商品列表设置类型名
    setGoodsType() {
      let goodsList = this.goodsDataList
      let typeList = this.shopTypeCateList
      if (goodsList.length && typeList.length) {
        for (let i = 0; i < goodsList.length; i++) {
          for (let j = 0; j < typeList.length; j++) {
            if (goodsList[i].category_id1 == typeList[j].category_id1) {
              goodsList[i].type_name1 = typeList[j].type_name
              let categoryList = typeList[j].categoryList
              for (let k = 0; k < categoryList.length; k++) {
                if (goodsList[i].category_id2 == categoryList[k].category_id2) {
                  goodsList[i].type_name2 = categoryList[k].type_name
                  break
                }
              }
              break
            }
          }
        }
      }
      return goodsList
    },

    // 商品列表分类
    goodsData() {
      let dataArr = []
      let goodsList = this.setGoodsType
      for (let i = 0; i < goodsList.length; i++) {
        let { type_name2, category_id2 } = goodsList[i]
        if (dataArr.length == 0) {
          dataArr.push({
            myId: i,
            type_name2,
            category_id2,
            List: [goodsList[i]]
          })
        } else {
          let res = dataArr.some(item => {
            //判断相同类，有就添加到当前项
            if (item.category_id2 == category_id2) {
              item.List.push(goodsList[i])
              return true
            }
          })
          if (!res) {
            //如果没找相同,添加一个新对象
            dataArr.push({
              myId: i,
              type_name2,
              category_id2,
              List: [goodsList[i]]
            })
          }
        }
      }
      return dataArr
    },
    // 页面显示商品列表,是否有加到购物车
    showGoodsList() {
      let goodsData = this.goodsData
      let goodsOrder = this.goodsOrder
      for (let index = 0; index < goodsOrder.length; index++) {
        goodsData.forEach(item => {
          if (goodsOrder[index].category_id2 == item.category_id2) {
            for (let j = 0; j < item.List.length; j++) {
              if (goodsOrder[index].goods_id == item.List[j].id) {
                item.List[j].buyNum = goodsOrder[index].num
                break
              }
            }
          }
        })
      }
      return goodsData
    },
    popupHeight() {
      let len = this.goodsOrder.length
      if (len < 6) {
        return 140 * len + 10 * (len - 1) + 20 + 'rpx'
      } else {
        return '50vh'
      }
    },
    ...mapGetters(['totalPrice', 'currComInfo']),
    ...mapState(['latLog', 'brandInfo', 'centers', 'goodsOrder', 'shopComList', 'shopComIndex', 'carModelDataList']),
  },
  methods: {
    switchCompoay() {
      let id = this.currComInfo?.id
      let index = this.shopComList.findIndex(v => v.id == id)
      this.defaIndex = index
      this.showComList = true
    },
    // 切换公司
    selectComList(e) {
      let id = e.detail.value.id
      this.shareMixin.query = `c=${id}`
      let { brand_id } = this.brandInfo
      this.getDoodsParam.company_id = id
      this.getShopTypeCateList(brand_id, true)
      this.saveComIndex(id) //保存公司Id
      this.emptyShoppCart() //清空购物车
      this.getGoodsBannerList(brand_id, id)
      this.showComList = false
      this.tabsClick({ ve_name: '全部', vem_vid: 'all' }, false)
      this.mackExit(false)
      this.$nextTick(() => {
        this.scrollTop_ = this.scrollTop_ == 1 ? 0 : 1
      })
    },
    // 轮播图
    async getGoodsBannerList(brand_id, company_id) {
      const { data: { code, data, total } } = await goodsBannerListApi({
        page: 1,
        brand_id,
        company_id,
        pageSize: 6,
        state: '1'
      })
      if (code == 200 && total) {
        let base = `${this.$baseUrl}/images/company/ppgda/`
        this.dataList = data.map(item => ({
          id: item.id,
          title: item.title,
          picture: `${base}${item.picture}`
        }))
      }
    },
    // 商品车型列表
    async getGoodsCarList(brand_id) {
      const {
        data: { data }
      } = await goodsCarListApi({ brand_id })
      this.saveCarModelDataList(data)
    },
    // 产品列表
    async getGoodsList(cb1, cb2, cb3) {
      console.log('this.getDoodsParam :>> ', this.getDoodsParam);
      const {
        data: { data = [] }
      } = await goodsListApi(this.getDoodsParam)
      this.goodsDataList = data
      cb1 && cb1()
      cb2 && cb2(data, this.carModelDataList)
      cb3 && cb3(true)
    },
    // 分类列表
    async getShopTypeCateList(brand_id, flag) {

      const {
        data: { data = [] }
      } = await getShopTypeCateListApi({
        brand_id,
        company_id: '',
        state: '1'
      })
      this.shopTypeCateList = data.map((item, index) => ({
        id: index,
        name: item.type_name,
        type_name: item.type_name,
        category_id1: item.category_id1,
        categoryList: item.categoryList
      }))
      if (data.length > 0) {
        if (!flag) {
          this.getDoodsParam.category_id1 = data[0].category_id1
        }
        // 产品列表
        this.getGoodsList(null, this.getCarList)
      }
    },
    // 滚动到顶部
    scrollToLimit() {
      this.$nextTick(() => {
        this.isMove = false
        // this.tabsIndex = 'all'
        console.log('到顶了')
      })
    },
    touchmove() {
      // console.log('ddddd')
      if (setTi) {
        clearTimeout(setTi)
      }
      setTi = setTimeout(() => {
        this.itemIndex = -1
        setTi = null
      }, 200)
      return
    },
    // popupScroll() {
    //   console.log('popupScroll')
    //   if (popupScroll) {
    //     clearTimeout(popupScroll)
    //   }
    //   popupScroll = setTimeout(() => {
    //     this.itemIndex = -1
    //     // console.log('popupScroll')
    //     popupScroll = null
    //   }, 200)
    //   return
    // },
    getCarList(gooList, carList) {
      let temp = []
      let temp4 = []
      // 找出车型id
      if (gooList.length > 0 && carList.length > 0) {
        for (let index = 0; index < gooList.length; index++) {
          let temp2 = gooList[index].ve_id.split(',').filter(Boolean)
          temp = [...temp, ...temp2]
        }
        // 去重
        let temp3 = [...new Set(temp)].sort((a, b) => a - b)
        // 去重后的车系数组，是否包含于车系列表中，有则添加后回，
        for (let i = 0; i < temp3.length; i++) {
          for (let j = 0; j < carList.length; j++) {
            if (carList[j].vem_vid == temp3[i]) {
              temp4.push(carList[j])
              break
            }
          }
        }
      }
      this.compuCarSeries = temp4
      this.setCarSort(true)
    },
    //右侧车型标签相关
    setCarSort(isFirst = false) {
      let carSeries = this.compuCarSeries
      let arr = []
      carSeries.forEach(item => {
        let index = this.leftTypeVeIds.findIndex(x => x == item.vem_vid)
        if (index > -1) {
          arr.unshift(item)
        } else {
          arr.push(item)
        }
      })
      if (isFirst) {
        let index2 = arr.findIndex(item => item.vem_name == '全系')
        if (index2 > -1) {
          let temp = arr.splice(index2, 1)
          arr.unshift(temp[0])
        }
      }
      console.log('setCarSort', arr)
      this.showCarSeries = arr
    },
    // 点击tab栏
    onClickItem(e) {
      if (e === this.currIndex) return
      // this.inTheEnd = true
      this.scrollTop_ = this.scrollTop__
      this.$nextTick(() => {
        if (this.isMove_) {
          this.scrollTop_ = 200
        } else {
          this.scrollTop_ = 0
        }
        this.leftType = 0
      })
      this.mackShow = false
      this.currIndex = e
      this.tabsIndex = 'all'
      this.getDoodsParam.ve_id = ''
      let temp = this.shopTypeCateList[e]
      this.getDoodsParam.category_id1 = temp.category_id1
      // 产品列表
      this.getGoodsList(this.backTop, this.getCarList)
      this.scrollLeft = this.scrollLeft == 0 ? 1 : 0
    },
    // 回顶部
    backTop() {
      this.scrollTop_ = this.scrollTop__
      this.$nextTick(() => {
        // this.scrollTop = this.scrollTop == 0 ? 1 : 0 
        if (this.isMove_) {
          this.scrollTop_ = 200
        } else {
          this.scrollTop_ = 0
        }
      })
    },
    // 回首页
    leftClick() {
      uni.switchTab({
        url: '/pages/index'
      })
    },
    myUser() {
      uni.switchTab({
        url: '/pages/MyInfo'
      })
    },
    // 点击左侧导航
    clickType(i, id) {
      // console.log(i)
      // this.flag = true;
      // if (i === this.leftType) return;
      // this.$nextTick(() => {
      let query = uni.createSelectorQuery();
      console.log('t', query.select(`#AA${id}`))
      query.select(`#AA${id}`).boundingClientRect();
      query.exec(res => {
        console.log('xxx距离页面顶部的距离', this.scrollTop__ + res[0].top - 256)
        this.$nextTick(() => {
          this.scrollTop_ = (this.scrollTop__ + res[0].top - 256) + 'px'
        })
      })
      // this.scrollTop_ =  (421 - 240) + 'px'
      // let t = query.getElementById(`#AA${id}`).offsetTop
      // this.scrollTop = t


      this.leftType = i
      if (!this.mackShow) {
        this.tabsIndex = 'all'
      }
      // })
    },
    // 点击车系
    tabsClick(e, flag = true) {
      this.scrollTop = 0
      this.scrollTop_ = 199
      // if (this.tabsIndex == e.vem_vid) return;
      this.leftType = 0
      this.tabsIndex = e.vem_vid
      // 点击全部
      if (e.vem_vid == 'all') {
        this.scrollTop_ = 190
        this.mackShow = false
        this.getDoodsParam.ve_id = ''
        this.isMove = false
        if (flag) {
          // 产品列表
          this.getGoodsList(this.backTop, null, this.setCarSort)
        }
      } else {
        this.mackShow = true
        this.getDoodsParam.ve_id = e.vem_vid
        // 产品列表
        this.getGoodsList(this.backTop)
      }
    },
    scrollFun(e) {
      this.scrollTop__ = e.target.scrollTop
      // scrollFun(event) {
      // 防抖
      if (this.flag) {
        this.flag = false;
        setTimeout(() => {
          this.flag = true;
        }, 0);
        // console.log('e', e.target.scrollTop)
        if (e.target.scrollTop > 194) {
          this.isMove_ = true
        } else {
          this.isMove_ = false
        }
        const query = uni.createSelectorQuery().in(this)
        // scroll-view 离顶的距离
        query
          .select(`#goodsId`)
          .boundingClientRect(({ top }) => {
            this.fatheTop = top + e.target.scrollTop - (this.navBarHeight + this.statusHeight)
            // console.log('top', top)
          })
          .exec()
        // 左边商器类型导航
        // console.log(' query',  query)
        // console.log(' this.leftTypeCate',  this.leftTypeCate)
        this.leftTypeCate.forEach((item, index) => {
          // console.log(item, index, `#AA${item.category_id2}`)
          // console.log('111',  query.select(`#AA${item.category_id2}`))
          setTimeout(() => {
            query
              .select(`#AA${item.category_id2}`)
              .boundingClientRect(e => {
                if (
                  e.top - this.fatheTop < 0 &&
                  Math.abs(e.top - this.fatheTop) < e.height
                ) {
                  this.leftType = index
                  // console.log('滚动触发', e)
                  // console.log('index', index)
                  // this.tabsIndex = ''
                }
              })
              .exec()
          }, 0);
        })
      }
    },
    // 商品滚动
    scrollList(e) {
      // console.log('e',e.target.scrollTop)
      // scrollList(event) {
      // 防抖
      // if (this.flag) {
      //   this.flag = false;
      //   setTimeout(() => {
      //     this.flag = true;
      //   }, 100);
      if (e.target.scrollTop > 12) {
        this.isMove = true
      } else {
        this.isMove = false
      }
      const query = uni.createSelectorQuery().in(this)
      // scroll-view 离顶的距离
      query
        .select(`#goodsId`)
        .boundingClientRect(({ top }) => {
          this.fatheTop = top + 70
        })
        .exec()
      // 左边商器类型导航
      for (let index = 0; index < this.leftTypeCate.length; index++) {
        let item = this.leftTypeCate[index]
        query
          .select(`#AA${item.category_id2}`)
          .boundingClientRect(e => {
            if (
              e.top - this.fatheTop < 0 &&
              Math.abs(e.top - this.fatheTop) < e.height
            ) {
              this.leftType = index
              console.log('滚动触发')
              // this.tabsIndex = ''
            }
          })
          .exec()
      }
      // this.leftTypeCate.forEach((item, index) => {

      // })
      // }
    },
    mackExit(flag = true) {
      this.tabsIndex = 'all'
      this.getDoodsParam.ve_id = ''
      this.mackShow = false
      if (flag) {
        // 产品列表
        this.getGoodsList(null, null, this.setCarSort)
      }
      this.leftType = 0
      // this.scrollTop_ = this.scrollTop__
      this.scrollTop_ = 199
      this.scrollLeft = this.scrollLeft == 0 ? 1 : 0
    },
    toGoodsPay() {
      if (!this.goodsOrder.length) {
        return uni.$showMsg('您还没选择购买的商品！')
      }
      uni.navigateTo({ url: `/Shop/GoodsPay` })
    },
    hasNeedDelete(v) {
      this.needDelete = v.flag
      if (v?.path) {
        this.popupShow = !this.popupShow
        this.itemIndex = -1
      }
    },
    showCart() {
      if (!this.goodsOrder.length) {
        return uni.$showMsg('您还没选择购买的商品！')
      }

      this.$refs.deletedGoods.getNeedDeleteGoods()
      this.$nextTick(() => {
        if (this.needDelete) {
          this.popupShow = !this.popupShow
          this.itemIndex = -1
        }
      })
    },
    touchMove(e) {
      if (this.flag2 !== 0) return
      let { pageX, pageY } = e.touches[0]
      let tx = pageX - this.lastX
      let ty = pageY - this.lastY
      let isLrOrUd = Math.abs(tx) > Math.abs(ty)
      if (!isLrOrUd && !(ty < 0)) {
        console.log('向下滑动')
        this.flag2 = ty < 0 ? 3 : 4
      }
    },
    touchStart(e) {
      let { pageX, pageY } = e.touches[0]
      this.lastX = pageX
      this.lastY = pageY
    },
    touchEnd() {
      this.flag2 = 0
    },
    ...mapMutations(['saveComIndex', 'emptyShoppCart', 'saveCarModelDataList'])
  },
  watch: {
    leftType: {
      handler(newVal) {
        console.log('mackShow', this.mackShow)
        // if (timeout) {
        //   clearsetTimeout(timeout)
        // }
        // timeout = setTimeout(() => {
        // console.log('watch', newVal)
        if (!this.mackShow) {
          this.setCarSort()
        }
        //   }, 100)
      },
      // immediate: true,
      // deep: true
    },
    currComInfo: {
      handler(newVal) {
        if (this.firstLoad) {
          if (Object.keys(newVal).length) {
            console.log('watch-currComInfo :>> ', newVal);
            let { brand_id } = this.brandInfo
            let id = newVal?.id
            this.getDoodsParam.company_id = id
            this.shareMixin.query = `c=${id}`
            console.log('watch-Param :>> ', this.getDoodsParam);
            this.getGoodsBannerList(brand_id, id)
            // 分类列表
            this.getShopTypeCateList(brand_id)
            this.firstLoad = false
          }
        }
      },
      immediate: true,
      // deep: true
    }
  },
  onLoad() {
    let r_info = wx.getSystemInfoSync()
    let button_info = wx.getMenuButtonBoundingClientRect()
    this.statusHeight = r_info.statusBarHeight
    this.navBarHeight = (button_info.top - r_info.statusBarHeight) * 2 + button_info.height
    // 隐藏Bar
    uni.hideTabBar()
    let { brand_id } = this.brandInfo
    // 商品车型列表
    this.getGoodsCarList(brand_id)
    this.shareMixin.title = `锦龙商城`
    this.shareMixin.path = `/pages/Shop/ShopAdmin`
    // 产品列表
    uni.getSystemInfo({
      success: e => {
        // console.log(e)
        this.statusBarHeight = e.statusBarHeight
        // this.windowHeight = e.windowHeight
      }
    })
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {
    uni.hideTabBar()
    if (this.needReget > 0) {
      console.log('onShow',)
      let { id } = this.currComInfo
      // console.log('id', id)
      this.getGoodsList.company_id = id
      // 商品列表
      this.getGoodsList()
    }
    this.needReget++
  },
  // 页面周期函数--监听页面隐藏
  onHide() {
    uni.showTabBar()
  },
  // 页面周期函数--监听页面卸载
  onUnload() {
    // uni.showTabBar()
  },
  onPageScroll(e) {
    // if (canScroll) {
    //   canScroll = false
    //   setTimeout(() => {
    //     canScroll = true
    //   }, 100)
    //   if (e.scrollTop > 170) {
    // this.inTheEnd = true;
    //   } else {
    //     this.inTheEnd = false
    //   }
    // }
  },
  // onReachBottom() {
  //   this.inTheEnd = true
  // }
}
</script>

<style scoped lang="scss">
@import '@/styles/mixins.scss';

::v-deep .van-picker__toolbar {
  padding: 4px 0;
  width: 100%;
  position: fixed;
  z-index: 999;
  background-color: #fff;
  box-sizing: content-box;
}

.fixed_box {
  position: fixed;
  top: -204rpx;
  width: 100%;
}

.fixed_tab_box {
  position: sticky;
  z-index: 9;
  width: 100%
}

.fixed_tab_box_ {
  position: fixed;
  top: 314rpx
}

.max_box {
  width: 100%;
  height: 100%;
}

.fixed-touch {
  position: fixed
}

.fixed-touch {
  position: fixed;
}

::v-deep .tab_box .area_box {
  padding: 0 0 10rpx;
}

.swiper_box {
  // height: 312px;
  position: relative;
  z-index: 1;
  height: 400rpx;

  // position: relative;
  .tab_box {
    // position: sticky;
    // top: 265px;
    width: 100%;
    // position: absolute;
    // bottom: 0;
    // top: -32rpx;
  }
}

.main_box {
  width: 100%;
  height: calc(100% - 400rpx);
  position: relative;
  z-index: 2
}

.company_box {
  position: sticky;
  z-index: 8;
  padding: 0 36rpx 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 144rpx;
  background: #fff;
  border-bottom: 2rpx solid rgba(5, 5, 5, 0.06);
  border-radius: 30rpx 30rpx 0 0;

  &_top {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-right: 20rpx;
    box-sizing: border-box;
  }

  &_text {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 28rpx;
    line-height: 54rpx;


    &_left {
      display: flex;
      flex-direction: row;

      .text {
        @include text-ellipsis()
      }
    }

    .iconfont {
      margin-right: 14rpx;
    }
  }

  &_ringht {
    width: 136rpx;
    margin-top: 8rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .company_box_bottom {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: $theme-color;
    }

    .icon_box {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      flex-wrap: wrap;
      text-align: center;
    }

    .text {
      font-size: 24rpx;
      color: $theme-color;
    }
  }
}

// /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
// ::-webkit-scrollbar
// {
// width: 6px;
// height: 6px;
// background-color: #ffffff;
// }
// /*定义滚动条轨道 内阴影+圆角*/
// ::-webkit-scrollbar-track
// {
// -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
// border-radius: 10px;
// background-color: yellow;
// }
// /*定义滑块 内阴影+圆角*/
// ::-webkit-scrollbar-thumb
// {
// border-radius: 10px;
// -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.3);
// background-color: #ff5500;
// }
.cart_scroll_box {
  position: sticky;
  // top: 204px;
  width: calc(100vw);
  // width: calc(100vw - 120px);
  height: 80rpx;
  // overflow: hidden;
  white-space: nowrap;
}

// 车型标签
.scroll_view {
  height: 100%;
  flex-wrap: nowrap;
  white-space: nowrap;
  flex-shrink: 0;
  background-color: #fff;
  border-bottom: 1px solid #eee;

  .tabs {
    display: inline-block;
    padding: 0 16rpx;
    margin: 20rpx 12rpx 20rpx 12rpx;
    line-height: 36rpx;
    font-size: 24rpx;
    text-align: center;
    border-radius: 20rpx;
    color: #333;
    border: 1px solid #999;
  }

  .tabsCurr {
    border: 1px solid $theme-color;
    color: $theme-color;
    background: #de414112;
  }
}

// 主
.scroll_box {
  position: relative;
  top: -44rpx;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;

  .scroll_left {
    background-color: #f6f6f6;
  }

  .right_box {
    align-content: flex-start;
    width: calc(100vw - 28vw);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .scroll_goods {
      width: calc(100vw - 28vw);
      padding-bottom: 110rpx;

      .scroll_goods_box {
        .scroll_goods_title {
          // margin-bottom: 30rpx;
          padding-top: 30rpx;
          font-size: 32rpx;
          font-weight: 600;
        }
      }
    }
  }
}

// 左侧栏
.scroll_view_left {
  position: sticky;
  // top: 204px;
  white-space: nowrap;
  width: 25vw;

  // border: #f00 solid 1px;
  // height: calc(100vh - 120rpx);
  &_item {
    width: 100%;
    text-align: center;
    background-color: #fff;
    color: #333;

    &-text {
      display: inline-block;
      width: 100%;
      height: 110rpx;
      line-height: 110rpx;
      text-align: center;
      font-size: 28rpx;
      background-color: #f6f6f6;
      color: #333;
      // border: #f00 solid 1px;
    }
  }

  .hasBorder {
    border-top: 1px solid #f1f1f1;
  }

  .left_active {
    border-top-left-radius: 30rpx;
    border-bottom-left-radius: 30rpx;
    // border: #f00 solid 1px;
    // overflow: hidden;
    background-color: #fff;
    color: $theme-color;
  }

  .top_radius {
    // border: #f0f solid 1px;
    border-bottom-right-radius: 30rpx;
  }

  .bottom_radius {
    // border: #000 solid 1px;
    border-top-right-radius: 30rpx;
  }

  .ba_color {
    background-color: #fff;
  }
}

.indicator-num {
  padding: 2px 0;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 100px;
  width: 35px;
  // @include flex;
  justify-content: center;

  &__text {
    color: #ffffff;
    font-size: 12px;
  }
}

.btm_car_box {
  z-index: 10074;
  bottom: 0;
  border-top: #eee solid 1px;
  position: fixed;
  width: 100%;
  left: 0;
  color: #f00;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;

  .btm_car {
    // width: 50rpx;
    width: 110rpx;
    // height: 50rpx;
    height: 110rpx;
    // height: 70rpx;
    border-radius: 50%;
    position: relative;
    // margin-left: 20rpx;
    padding-left: 20rpx;
    // left: 20rpx;
    // top: -48rpx;
    // background-color: #666;
    // background-color: $theme-color;
    // border: #333 solid 1px;
    display: flex;
    align-items: center;
    justify-content: center;

    .total {
      width: 30rpx;
      height: 30rpx;
      line-height: 30rpx;
      border-radius: 50%;
      text-align: center;
      position: absolute;
      right: -6rpx;
      top: 6rpx;
      background-color: $theme-color;
      color: #fafafa;
      font-size: 18rpx;
      font-weight: 400;
    }
  }

  .pay_btn {
    width: 220rpx;
    line-height: 110rpx;
    // line-height: 90rpx;
    text-align: center;
    font-size: 28rpx;
    background-color: $theme-color;
    color: #fafafa;
  }

  .sum {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;

    .text {
      // font-weight: 500;
      font-size: 36rpx;
      color: $theme-color;
    }
  }
}

.popup-box {
  // height: 50vh;
  // overflow: auto;
  // overflow: auto;
  margin-top: 30rpx;
  margin-bottom: 110rpx;
  // padding-bottom: 20rpx;
  background-color: #f6f6f6;
  // height: 100rpx;
  overflow-x: hidden;

  .scroll-view {
    height: 100%;
  }
}
</style>
<style lang="scss">
.u-swiper__indicator {
  bottom: 22px !important;

  .indicator-num {
    text-align: center;
  }
}
</style>
